<template>


  <article class="article" v-for="story in recentStories" :key="story.id" @click="gotoArticle(story.id)">
    <div class="left">
      <div class="title">{{ story.title }}</div>
      <div class="hint">{{ story.hint }}</div>
    </div>
    <div class="right">
      <img :src="story.images[0]" :alt="story.title">
    </div>
  </article>




</template>


<script setup>
import { computed } from 'vue'
import { useStore } from "@/stores/index.js";
const store = useStore();

import { useRouter } from 'vue-router';
const router = useRouter();


const props = defineProps({
  recentStories: {
    type: Array,
    default: () => []
  },
})

const recentStories = computed(() => props.recentStories);

const gotoArticle = (id) => {
  router.push({ path: `/article/${id}` });
};
</script>

<style scoped>
.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
}


.left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 70%
}

.title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.hint {
  font-size: 14px;
  color: #999;
}



.right {
  width: 80px;
  height: 80px;
  overflow: hidden;
  object-fit: cover;
}

.right img {
  width: 100%;

}
</style>
